<template>
  <div>
    <div>
      <el-row>
        <el-col :span="6">
          <div>
            【题型】 :
            <span>{{ questionType }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            【编号】 :
            <span>{{ questionsDetail.id }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            【难度】 :
            <span>{{ difficulty }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            【标签】 :
            <span>{{ questionsDetail.tags }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="addboder">
        <el-col :span="6">
          <div>
            【学科】 :
            <span>{{ questionsDetail.subjectName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            【目录】 :
            <span>{{ questionsDetail.directoryName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            【方向】 :
            <span>{{ questionsDetail.direction }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div></div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <!-- 题干 -->
    <div>
      <el-row>
        <el-col>
          <div>
            【题干】 :
            <div
              class="questionTitleTeam"
              v-html="questionsDetail.question"
            ></div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <!-- 单选 -->
        <el-col v-if="questionsDetail.questionType == 1">
          <!-- 题干选项 -->
          <div>单选题选项 (以下选中的选项为正确答案)</div>
          <el-radio-group :value="radio">
            <el-radio
              :label="item.code"
              v-for="(item, index) in questionsDetail.options"
              :key="index"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </el-col>
        <!-- 复选 -->
        <el-col v-else-if="questionsDetail.questionType == 2">
          <div>单选题选项 (以下选中的选项为正确答案)</div>
          <!-- 题干选项 -->
          <el-checkbox-group :value="checkList">
            <el-checkbox
              :label="item.code"
              v-for="(item, index) in questionsDetail.options"
              :key="index"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <!-- 参考答案 -->
    <div>
      <el-row>
        <el-col>
          <div>
            【参考答案】 :
            <el-button type="danger" size="mini" @click="vedioShow = true"
              >视频答案预览</el-button
            >
          </div>
          <div v-if="vedioShow">
            <video
              controls
              autoplay
              :src="questionsDetail.videoURL"
              style="width:400px"
            ></video>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <!-- 答案解析 -->
    <div>
      <el-row>
        <el-col>
          <div>
            【答案解析】 :
            <div v-html="questionsDetail.answer"></div>
          </div>
          <div></div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <!-- 题目备注 -->
    <div>
      <el-row>
        <el-col>
          <div>
            【题目备注】 :
            <span>{{ questionsDetail.remarks }}</span>
          </div>
          <div></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    currentData: {
      type: [Array, Object],
      requied: true
    }
  },
  data() {
    return {
      // 基础题库详情
      questionsDetail: {},
      radio: '',
      checkList: [],
      vedioShow: false
    }
  },
  created() {
    this.getdetail()
  },
  methods: {
    async getdetail() {
      const { data } = await detail(this.currentData)
      this.questionsDetail = data
      if (data.questionType === '2') {
        data.options.forEach(item => {
          if (item.isRight) {
            this.checkList.push(item.code)
          }
        })
        console.log(this.checkList)
      } else if (data.questionType === '1') {
        data.options.forEach(item => {
          if (item.isRight) {
            this.radio = item.code
          }
        })
      }
    }
  },
  computed: {
    // 题型
    questionType() {
      if (this.questionsDetail.questionType == 1) {
        return '单选'
      } else if (this.questionsDetail.questionType == 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty() {
      if (this.questionsDetail.difficulty == 1) {
        return '简单'
      } else if (this.questionsDetail.difficulty == 2) {
        return '一般'
      } else {
        return '困难'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-col {
  margin-top: 10px;
}
.el-divider--horizontal {
  height: 2px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.questionTitleTeam {
  color: #0000ff;
}
.el-radio,
.el-checkbox {
  display: block;
  margin-top: 10px;
}
</style>
